<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>修改商品</title>
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <link rel="stylesheet" href="../../static/lib/layui/css/layui.css" media="all" />
  <link rel="stylesheet" href="../../static/css/admin.css" media="all" />
</head>

<body>
<div id="TMM_app">
  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-body" style="padding: 15px;">
        <form class="layui-form" id="form" action="${path}/goods/edit" method="post" lay-filter="component-form-group">
          <div class="form-title">基本信息</div>
          <input type="hidden" name="id" id="id" value="${goods.id}">
          <div class="layui-row">
            <div class="layui-col-md9 layui-col-lg6">
<%--              <div class="layui-form-item">--%>
<%--                <label class="layui-form-label">所属类目</label>--%>
<%--                <div class="layui-input-block">--%>
<%--                  <select name="category_pid" id="category_pid" multiple lay-verify="required" lay-filter="category_pid">--%>
<%--                    <option value="" selected="selected">选择类目</option>--%>
<%--                    <c:forEach items="${categoryList}" var="category">--%>
<%--                      <option value="${category.id}" <c:if test="${goods.category_pid==category.id}">selected="selected"</c:if>>${category.name}</option>--%>
<%--                    </c:forEach>--%>
<%--                  </select>--%>
<%--                  <select name="category_id" id="category_id" multiple lay-verify="required" lay-filter="category_id">--%>
<%--                    <option value="" selected="selected">选择类目</option>--%>
<%--                  </select>--%>
<%--                </div>--%>
<%--              </div>--%>
                <div class="layui-form-item">
                    <label class="layui-form-label">所属类目</label>
                    <div class="layui-input-block">
                        <select name="category_pid" id="category_pid" multiple lay-verify="required" lay-filter="category_pid">
                            <option value="" >选择类目</option>
                            <c:forEach items="${categoryList}" var="category">
                                <option value="${category.id}" <c:if test="${goods.category_pid==category.id}">selected="selected"</c:if>>${category.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
              <div class="layui-form-item">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-block">
                  <input type="text" name="name" value="${goods.name}" lay-verify="required" autocomplete="off" class="layui-input" />
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">商品规格</label>
                <div class="layui-input-block">
                  <input type="text" name="units" value="${goods.units}" lay-verify="required" autocomplete="off" class="layui-input" />
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">商品原价</label>
                <div class="layui-input-block">
                  <input type="text" name="price" lay-verify="required" value="${goods.price}" placeholder="单位 元" autocomplete="off" class="layui-input" />
                </div>
              </div>
              <div class="layui-row">
                <div class="layui-col-md6 layui-col-lg6">
                  <div class="layui-form-item">
                    <label class="layui-form-label">是否置顶</label>
                    <div class="layui-input-block">
                      <input type="radio" name="is_recommend" lay-verify="otherReq" value="1" title="是" <c:if test="${goods.is_recommend==1}">checked</c:if>>
                      <input type="radio" name="is_recommend" lay-verify="otherReq" value="2" title="否" <c:if test="${goods.is_recommend==2}">checked</c:if>>
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">商品介绍</label>
                <div class="layui-input-block">
                  <i name="desc_str" placeholder="请输入商品介绍" class="layui-textarea">${goods.desc_str}</i>
                </div>
              </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input name="idx" type="text" placeholder="请输入排序" class="layui-input" value="${goods.idx}" />
                </div>
            </div>

            </div>
            <div class="layui-col-md3 layui-col-lg3 text-center tmm-right-logo">
              <img class="org_logo" src="${goods.cover_pic}" id="logoImg"/>
              <input type="hidden" name="cover_pic" id="cover_pic" value="${goods.cover_pic}">
              <div>商品封面图</div>
            </div>
          </div>

          <div class="form-title">商品轮播图</div>
          <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-upload tmm-image-upload">
              <div>
                <div class="layui-upload-list" id="banner">
                  <c:forEach items="${goods.banner.split(',')}" var="pic">
                    <div class="item">
                      <img src="${pic}" class="layui-upload-img">
                      <p><a href="javascript:void(0)" onclick="delPic(this)">删除</a>
                      </p>
                      <input type="hidden" value="${pic}" name="banner"/>
                    </div>
                  </c:forEach>
                </div>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-lg" id="bannerBtn">
                  <i class="layui-icon"></i>
                </button>
              </div>
            </div>
          </div>

          <div class="form-title">商品介绍图</div>
          <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-upload tmm-image-upload">
              <div>
                <div class="layui-upload-list" id="descPic">
                  <c:forEach items="${goods.desc_pic.split(',')}" var="pic">
                    <div class="item">
                      <img src="${pic}" class="layui-upload-img">
                      <p><a href="javascript:void(0)" onclick="delPic(this)">删除</a>
                      </p>
                      <input type="hidden" value="${pic}" name="desc_pic"/>
                    </div>
                  </c:forEach>
                </div>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-lg" id="descPicBtn">
                  <i class="layui-icon"></i>
                </button>
              </div>
            </div>
          </div>

          <div class="layui-form-item">
            <div class="layui-input-block">
              <div class="layui-footer">
                <button class="layui-btn tmm-btn-primary" type="button" lay-submit="" lay-filter="component-form-demo1">
                  提交
                </button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<script src="../../static/lib/layui/layui.js"></script>

<script>
  layui.config({
    base: "../../static/js/"
  }).extend({
    index: 'index' //主入口模块
  }).use(["index", "form", "laydate", "upload"], function () {
    var $ = layui.$,
            admin = layui.admin,
            element = layui.element,
            layer = layui.layer,
            laydate = layui.laydate,
            upload = layui.upload,
            form = layui.form;

    form.render(null, "component-form-group");

    laydate.render({
      elem: "#LAY-component-form-group-date"
      ,theme: '#d6b284'
    });

    laydate.render({
      elem: "#time"
      ,type:'datetime'
      ,trigger: 'click'
      ,range: true
      ,theme: '#d6b284'
    });

    $("#category_id").empty();
    var category_pid = $("#category_pid option:selected").val();
    if(category_pid!=null && category_pid!=''){
      $.ajax({
        type: "post",
        url: "${path}/goodsCategory/getCategoryList",
        dataType: "json",
        data:{pid:category_pid},
        success: function (data) {
          if(data.code==0){
            $("#category_id").append('<option value="">选择类目</option>')
            for(var i = 0; i<data.data.length;i++){
              var category_id = ${goods.category_id};
              if(category_id==data.data[i].id){
                $("#category_id").append('<option value="'+data.data[i].id+'" selected="selected">'+data.data[i].name+'</option>')
              }else{
                $("#category_id").append('<option value="'+data.data[i].id+'">'+data.data[i].name+'</option>')
              }
            }
            form.render();
          }

        }
      });
    }
    form.render();


    form.on('select(category_pid)', function(data){
      $("#category_id").empty();
      if(data.value!=null && data.value!=''){
        $.ajax({
          type: "post",
          url: "${path}/goodsCategory/getCategoryList",
          dataType: "json",
          data:{pid:data.value},
          success: function (data) {
            if(data.code==0){
              $("#category_id").append('<option value="" selected="selected">选择类目</option>')
              for(var i = 0; i<data.data.length;i++){
                $("#category_id").append('<option value="'+data.data[i].id+'">'+data.data[i].name+'</option>')
              }
              form.render();
            }

          }
        });
      }
      form.render();
    });

      //产品logo上传
      upload.render({
          elem: "#logoImg"
          ,url: '${path}/upload/uploadFile'
          ,data:{uploadUrl:"goods/"}
          ,size: 2048 //限制文件大小，单位 KB
          ,done: function(data,index,upload){
              if(data.code!=0){
                  layer.msg('上传失败', {
                      offset: '200px'
                      ,icon: 2
                      ,time: 1000
                      ,anim:4
                  }, function(){});
                  return;
              }else{
                  layer.msg('上传成功', {
                      offset: '200px'
                      ,icon: 1
                      ,time: 1000
                      ,anim:4
                  }, function(){});
                  $(this.item[0]).attr("src",data.data);
                  $("#cover_pic").val(data.data);
              }
          }
      });

      upload.render({
          elem: "#bannerBtn",
          url: "${path}/upload/uploadFile",
          data:{uploadUrl:"goods/"},
          size: 2048,
          multiple: true,
          before: function (obj) {
              //预读本地文件示例，不支持ie8
              obj.preview(function (index, file, result) {

              });
          },
          done: function (res) {
              //上传完毕
              $("#banner").append(
                  '<div class="item"><img src="' +
                  res.data +
                  '" class="layui-upload-img"><p><a href="javascript:void(0)" onclick="delPic(this)">删除</a></p>' +
                  '<input type="hidden" value="'+res.data+'" name="banner" ' +
                  '</div>'
              );
          }
      });

      upload.render({
          elem: "#descPicBtn",
          url: "${path}/upload/uploadFile",
          data:{uploadUrl:"goods/"},
          size: 2048,
          multiple: true,
          before: function (obj) {
              //预读本地文件示例，不支持ie8
              obj.preview(function (index, file, result) {

              });
          },
          done: function (res) {
              //上传完毕
              $("#descPic").append(
                  '<div class="item"><img src="' +
                  res.data +
                  '" class="layui-upload-img"><p><a href="javascript:void(0)" onclick="delPic(this)">删除</a></p>' +
                  '<input type="hidden" value="'+res.data+'" name="desc_pic" ' +
                  '</div>'
              );
          }
      });

    /* 自定义验证规则 */
    form.verify({
      title: function (value) {
        if (value.length < 5) {
          return "标题至少得5个字符啊";
        }
      },
      pass: [/(.+){6,12}$/, "密码必须6到12位"],
      content: function (value) {
        layedit.sync(editIndex);
      },
      otherReq: function(value,item){
        var $ = layui.$;
        var verifyName=$(item).attr('name')
                , verifyType=$(item).attr('type')
                ,formElem=$(item).parents('.layui-form')//获取当前所在的form元素，如果存在的话
                ,verifyElem=formElem.find('input[name='+verifyName+']')//获取需要校验的元素
                ,isTrue= verifyElem.is(':checked')//是否命中校验
                ,focusElem = verifyElem.next().find('i.layui-icon');//焦点元素
        if(!isTrue || !value){
          //定位焦点
          focusElem.css(verifyType=='radio'?{"color":"#FF5722"}:{"border-color":"#FF5722"});
          //对非输入框设置焦点
          focusElem.first().attr("tabIndex","1").css("outline","0").blur(function() {
            focusElem.css(verifyType=='radio'?{"color":""}:{"border-color":""});
          }).focus();
          return '必填项不能为空';
        }
      }
    });

    /* 监听指定开关 */
    form.on("switch(component-form-switchTest)", function (data) {
      layer.msg("开关checked：" + (this.checked ? "true" : "false"), {
        offset: "6px"
      });
      layer.tips(
              "温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF",
              data.othis
      );
    });

    /* 监听提交 */
    form.on("submit(component-form-demo1)", function (data) {
      var action = $("#form").attr("action");
      var logo = $("#cover_pic").val();
      if(logo==null || logo==''){
        layer.alert("请上传商品封面图", {icon: 2});
        return false;
      }
      var index = layer.load(2);
      $.ajax({
        type:"post",
        url:action,
        dataType:"json",
        data:$('#form').serialize(),
        success:function(data){
          layer.close(index);
          if(data.code ==0){
            layer.alert(data.msg,{icon:1}, function(){
              location.reload();
            });
          }else{
            layer.alert(data.msg,{icon:2});
          }
        },
        error:function (data) {
          layer.close(index);
        }
      });
      return false;
    });
  });
  //删除图片
  function delPic(x) {
    x.parentNode.parentNode.remove();
  }
</script>
</body>

</html>